import React, { Component } from "react";
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

class Tick extends Component{
    componentDidMount(){
        tickObj.init(this.props.id, this.props.tick);
    }
    
    componentDidUpdate(){
        tickObj.setPoint(this.props.tick);
    }

    componentWillUnmount(){
        tickObj.destory();
    }

    render(){
        return <div id={this.props.id} className={ this.props.className || '' } style={ this.props.style || null }></div>;
    }
}

let tickObj = {
    "map": null,
    "point": null,
    "init": function(elem, tick){
        //初始化地图
        this.map = L.map(elem, {
            "zoom": 12,
            "center": [34.56594843343395, 119.46842193603517],
            "zoomControl": false,
            "scrollWheelZoom": false,
            "keyboard": false,
            "attributionControl": false,
            "dragging": false,
            "doubleClickZoom": false,
            "layers": L.geoJSON(fram, {
                "interactive": false,
                "color": "#000",
                "weight": 1
            })
        });
        //绘制点
        this.point = L.circle(ticks[tick].reverse(), {
            "redius": 10,
            "color": "red",
            "fill": false,
            "interactive": false
        }).addTo(this.map);
    },
    "setPoint": function(tick){
        this.point._latlng.lng = ticks[tick][0];
        this.point._latlng.lat = ticks[tick][1];
        this.point.redraw();
    },
    "destory": function(){
        this.map.remove();
    }
};

//坐标轴
let fram = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [119.4466062709, 34.5757867248305], [119.446670530805, 34.5660875244162], [119.446740160785, 34.555572527964]
                ]
            },
            "properties": {
                "Name": "fram"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [119.446670530805, 34.5660875244162], [119.491619611444, 34.5662829902804]
                ]
            },
            "properties": {
                "Name": "fram"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [119.446742249426, 34.5552570327173], [119.44853579261, 34.5558984100292], [119.450313354117, 34.558973582195], [119.452077300759, 34.564144517273], [119.453835788576, 34.5701830354855], [119.455605146545, 34.5745922201404], [119.457395380287, 34.5758171350974], [119.459198480511, 34.5750634207253], [119.461012485528, 34.5726150201236], [119.462836383432, 34.5686116491317], [119.464662458071, 34.564240919483], [119.466482914233, 34.5607197433592], [119.468292088242, 34.5589472872121], [119.470088752535, 34.5591353873339], [119.471874828087, 34.5610000986221], [119.473648460857, 34.5648524100624], [119.47541246128, 34.5702641464934], [119.477183683779, 34.5745580981528], [119.478976965233, 34.5753455123648], [119.480785286823, 34.5737193560659], [119.482600992772, 34.5708897790169], [119.484423821443, 34.5668860746239], [119.486249660414, 34.5623640224873], [119.48807124002, 34.5585044821166], [119.489883667123, 34.5561164809354], [119.491685957053, 34.5553780526927]
                ]
            },
            "properties": {
                "Name": "fram"
            }
        }
    ]
};

//tick点的坐标
let ticks = [
    [119.446742473207,34.5552232296542],
    [119.4485360008,34.5558668604974],
    [119.45031326517,34.55898710342],
    [119.452078084085,34.5640250798495],
    [119.453836657978,34.5700500769368],
    [119.455605528494,34.5745336282631],
    [119.457395760997,34.5757585432145],
    [119.45919859726,34.5750453924461],
    [119.461012761852,34.5725722029303],
    [119.462837180489,34.5684877045054],
    [119.464663107886,34.5641395101404],
    [119.46648321641,34.560672418958],
    [119.468292245978,34.5589224982257],
    [119.470088895448,34.5591128518858],
    [119.47187487082,34.5609933379878],
    [119.47364877322,34.5648028320945],
    [119.475413183111,34.5701492158186],
    [119.477184008264,34.5745062666941],
    [119.478977190194,34.5753094556923],
    [119.480785426928,34.5736968206331],
    [119.482601369691,34.5708289333024],
    [119.484424447333,34.5667846650035],
    [119.486250242412,34.5622693734109],
    [119.488071598975,34.5584458897775],
    [119.489883832194,34.5560894382991]
];

export default Tick;